@import '~@/styles/var.scss';
@import '~@/styles/mixin.scss';
@import '~@/styles/playCount.scss';

.discover {
  height: 100%;
  overflow: hidden;
  & .banner {
    position: relative;
    height: 390px;
    padding-top: 18px;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 50px;
      left: 0;
      background-color: $theme-bg;
    }
  }
  & .menu {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #dbdcde;
    &-item {
      flex: 0 0 25%;
      padding: 45px 0;
      & p {
        text-align: center;
        font-size: $font-size-small-x;
        color: #2e302f;
      }
    }
    &-icon {
      position: relative;
      width: 50%;
      height: 0;
      margin: 0 25% 25px;
      padding-top: 50%;
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        @include bg-full;
      }
      &.fm:before {
        @include bg-url('~@/assets/images/discover/icn_fm.png');
      }

      &.fm:active:before {
        @include bg-url('~@/assets/images/discover/icn_fm_prs.png');
      }
      &.daily {
        &:before {
          @include bg-url('~@/assets/images/discover/icn_daily.png');
        }
        &:after {
          content: attr(data-date);
          position: absolute;
          top: 60%;
          left: 50%;
          font-size: $font-size-small;
          color: $theme-color;
          transform: translate(-50%, -50%);
        }
      }
      &.daily:active {
        &:before {
          @include bg-url('~@/assets/images/discover/icn_daily_prs.png');
        }
        &:after {
          color: $theme-sub-color;
        }
      }
      &.playlist:before {
        @include bg-url('~@/assets/images/discover/icn_playlist.png');
      }

      &.playlist:active:before {
        @include bg-url('~@/assets/images/discover/icn_playlist_prs.png');
      }
      &.rank:before {
        @include bg-url('~@/assets/images/discover/icn_rank.png');
      }

      &.rank:active:before {
        @include bg-url('~@/assets/images/discover/icn_rank_prs.png');
      }
    }
  }

  & .lcrlist {
    width: 100%;
    &-hd {
      height: 160px;
      padding-left: 18px;
      line-height: 160px;
      font-size: $font-size-large;
      font-weight: 700;
      span {
        padding-right: 50px;
        @include bg-url('~@/assets/images/aa7.png');
        @include bg-full($s: 28px, $p: right center);
      }
    }
    &-bd {
      display: flex;
      flex-flow: wrap;
      padding: 0 13px;
    }
    &-item {
      position: relative;
      flex: 0 0 33.333333%;
      .item-img {
        width: calc(100% - 10px);
        height: 0;
        padding-top: calc(100% - 10px);
        margin: 0 5px;
        overflow: hidden;
        @include playCount;
        img {
          position: absolute;
          top: 0;
          left: 0;
          @include img-full;
        }
      }
      .item-title {
        height: 100px;
        margin: 20px 10px;
        line-height: 50px;
        color: #333;
        font-size: $font-size-small-x;
        word-wrap: break-word;
        word-break: break-all;
        @include no-wrap(2);
      }
    }
  }
}
